@import './variables';

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: $font-family;
  color: $text-color;
  background-color: $bg-color;
  overflow: hidden;
}

/* 大屏布局基础样式 */
.big-screen {
  &-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background: url('@/assets/images/bg-grid.png') no-repeat center/cover;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at center, rgba(10,26,46,0.8) 0%, $bg-color 100%);
      z-index: -1;
    }
  }

  /* 标题栏样式 */
  &-header {
    height: $panel-header-height;
    padding: 0 $spacing-lg;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: $panel-bg;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 10;

    .title {
      font-size: $font-size-xl;
      font-weight: normal;
      letter-spacing: 1px;
      background: linear-gradient(to right, #fff, #3a84ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* 内容区域样式 */
  &-content {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    padding: $spacing-base;

    /* 数据面板通用样式 */
    .data-panel {
      background: $panel-bg;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      box-shadow: $box-shadow;
      transition: $transition-base;

      &:hover {
        box-shadow: 0 0 15px rgba(58, 132, 255, 0.5);
      }

      &-header {
        padding: $spacing-base $spacing-lg;
        border-bottom: 1px solid $border-color;
        font-size: $font-size-lg;
        display: flex;
        justify-content: space-between;
      }

      &-body {
        padding: $spacing-lg;
        height: calc(100% - #{$panel-header-height});
        overflow: auto;
      }
    }
  }

  /* 边框装饰效果 */
  .decorative-border {
    position: absolute;
    z-index: 5;

    &-top, &-bottom {
      height: 2px;
      left: 0;
      right: 0;
      background: linear-gradient(to right, transparent, $primary-color, transparent);
    }

    &-top { top: 0; }
    &-bottom { bottom: 0; }

    &-left, &-right {
      width: 2px;
      top: 0;
      bottom: 0;
      background: linear-gradient(to bottom, transparent, $primary-color, transparent);
    }

    &-left { left: 0; }
    &-right { right: 0; }
  }

  /* 动画效果 */
  @keyframes flicker {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
  }

  .pulse {
    animation: flicker 3s infinite;
  }

  /* 滚动条样式 (Webkit) */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba($primary-color, 0.5);
    border-radius: 3px;

    &:hover {
      background: $primary-color;
    }
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }
}

/* 响应式适配 */
@media (max-width: 1600px) {
  html {
    font-size: 12px;
  }
}

/* 全屏模式特殊处理 */
:fullscreen {
  .big-screen-header {
    padding-top: env(safe-area-inset-top); // 适配刘海屏
  }
}